import { useEffect, useState } from "react";
import { Select, ConfigProvider } from "antd";
import { regionFinish } from "@/api/public";
import selectArrow from "@/assets/theme/select-arrow.png";
import selectArrowLight from "@/assets/theme/select-arrow-light.png";
import styles from "./index.module.scss";
import { useSelector } from "react-redux";


export default function SelectPr(props) {
  const theme = useSelector((state) => state.theme);
  const [options, setOptions] = useState([]);
  useEffect(() => {
    getOption();
  }, []);
  function getOption() {
    regionFinish().then((res) => {
      if (res?.code === 0) {
        setOptions(res?.data);
      }
    });
  }
  const handleChange = (value) => {
    props.getSelectValue(value);
  };
  return (
    <ConfigProvider
      theme={{
        cssVar: true,
        components: {
          Select: {
            paddingSM: 55,
            colorTextPlaceholder: "#ffffff",
            colorText: "#ffffff",
            algorithm: false,
            primaryShadow: "0px 0px 12px rgba(0, 0, 0, 0)",
            hoverBorderColor: "transparent",
            activeBorderColor: "transparent",
            colorBorder: "transparent",
            colorBgElevated: "rgb(20, 31, 57)",
            optionSelectedBg: "#1677ff",
            colorBgContainer: "transparent",
            controlOutlineWidth: "0",

            // colorIcon: "#ffffff",
            // colorBgBase: "#37445a",
            // fontSizeIcon: "14px",
          },
        },
      }}
    >
      <div className={styles.selectBox}>
        <Select
          allowClear
          suffixIcon={
            <img
              style={{ width: 14, height: 14 }}
              src={theme?selectArrowLight:selectArrow}
              alt="加载中..."
            />
          }
          style={{
            width: 235,
            height: 46,
          }}
          fieldNames={{
            label: "name",
            value: "value",
            options: "options",
          }}
          placeholder="产品线"
          onChange={handleChange}
          options={options}
        />
      </div>
    </ConfigProvider>
  );
}
